import React from 'react'
//1. 导入 useState 函数
import {useState} from 'react';

export default function StateCom() {
  console.log('run run run');
  //2. 函数式组件内部调用 useState 函数
  // count 变量用来接收状态值
  // setCount 变量接收更新状态的函数
  let [count, setCount] = useState(100);//接收一个参数是『状态的初始值』 返回的结果是一个『数组』
  let [count2, setCount2] = useState(0);

  //3. 声明事件回调函数
  let fn = () => {
    //更新状态
    setCount(count + 1);//调用 setXXX 函数更新状态之后, 会自动执行当前组件函数, 重新渲染组件
    //这里直接通过 count 无法获取最新值
    // setCount(v => {
    //   console.log(v);
    //   return v;
    // });
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={fn}>新增</button>

      <hr />

      <h1>{count2}</h1>
      <button onClick={() => {
        setCount2(count2 + 2);
      }}>新增</button>

      <hr />

      <button onClick={() => {
        setCount(count + 10);
        setCount2(count2 + 20);
      }}>更新两个状态</button>
    </div>
  )
}


